<template>
  <view>
    <u-loading-icon
        v-if="loading"
    mode="circle"
    :size="50"
    ></u-loading-icon>
    <view
    v-if="!loading&&(!list||list.length===0)"
    class="loading-box"
    >
      <image
          class="loading-image"
      :src="$kt.file.byPath('icon/interrelation.svg')"
      ></image>
      <view class="loading-text">{{$i18n.zhToGlobal("空空如也")}}</view>
    </view>
    <view v-for="item in list"
          @click="select(item.userAccountOfFollower)"
          class="box">
      <user-info-card
          :user-info="item.userAccountOfFollower"
      ></user-info-card>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    userAccountId: {
      type: String || Number,
      default: ''
    },
    keyword: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list:[],
      loading:true
    };
  },
  watch: {
    userAccountId: {
      handler(val) {
        this.getInit();
      },
      immediate: true,
      deep: true
    },
    keyword: {
      handler(val) {
        this.getInit();
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.getInit();
  },
  mounted() {

  },
  methods: {
    select(item){
      this.$emit('select',item);
    },
    search(){},
    getInit(){
      this.loading = true;
      this.list = [];
      this.$request.post('/user-interrelation-web/interrelation/getFollowedList',
          {data:{
              userAccountId:this.userAccountId,
              keyword:this.keyword}}
      ).then(res => {
        this.list = res.data;
        this.loading = false;
      }).catch(err => {
        uni.showToast({
          title: err.errMsg,
          icon: "none"
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  padding-bottom: 20rpx;
}
.box:active{
  transform: scale(0.97);
}
.loading-box{
  text-align: center;
}
.loading-image{
  margin-top: 30rpx;
  height: 100rpx;
  width: 100rpx;
  opacity: .7;
}
.loading-text{
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999999;
  letter-spacing: 2rpx;
}
</style>
